<template>
  <view class="container" >
    <!-- 头部 -->
	<view  class="header">
			<view class="today">今天</view>
			<view class="date"@tap="openDate" >4月18日 周六</view>
			<view class="inp" @tap="openpup">
				<view class="key">快速搜索</view>
				<view class="oval"></view>
				<view class="shape"></view>
			</view>
			<text class="line"></text>
	</view>
	<!-- 列表 -->
	<scroll-view scroll-y class="content">
		<uni-swipe-action class="list">
			<uni-swipe-action-item  
			  v-for="(item,index) in todoStore.list" 
			  :key="item.id"
			  :show="item.show"
			  :auto-close = "false"
			>
			  <view class="list-item" v-if="item.isFinish==='1'" >
				<!-- 长方形 -->
				<view class="rec"></view>
				<!-- 内容信息 -->
				<view class="list-content" @tap="openDec(item)">
					<view class="title" :style="item.isColor ? 'color: #ff9500 !important' : 'color: #262626 !important'">{{item.title}}</view>
					<view v-if="item.time" class="time">{{item.time}}</view>
				</view>
				<!-- 图标 -->
				<view class="iconfont icon-qingdan"></view>
			 </view>
			 <!-- 右侧插槽 -->
			<template #right>
				 <view class="left">
					 <view class="left-content" v-if="item.isdelete">
					 	<view class="iconfont icon-combinedshape"></view>
					 	<view class="delete-button" @tap.stop="todoStore.handleDelete(item.id)">
					 		<view class="iconfont icon-jianpanshanchu"></view>
					 	</view>
					 </view>
					 <view class="isdelete" v-else @tap.stop="todoStore.listDelete(item.id)">
					     确认删除
					 </view>
				 </view>
			 </template>
			 <!-- 左侧插槽 -->
			 <template #left>
				 <view class="right">
					<view class="iconfont icon-duihao" @tap="todoStore.handleFinish(item.id)"></view>
					<view class="big">
						<view class="iconfont icon-dui"></view>
						<view class="icon-title">右划可以快捷完成事项</view>
					</view>
				 </view>
			 </template>
		   </uni-swipe-action-item>
		</uni-swipe-action>
		<view class="add-list" @tap="openAdd">
			<view class="iconfont icon-jiahao1"></view>
			<view class="add-title">添加事项</view>
		</view>
	</scroll-view>
	<!-- 底下工具栏 -->
	<view class="toolbar" >
		<!-- 顶部横线 -->
		<view class="line"></view>
		
		<!-- 主要内容 -->
		<view class="toolbar-content">
			<!-- 左侧菜单 -->
			<view class="iconfont icon-caidan" @tap="openMenu">
	
			</view>
			<!-- 中间加号 -->
			<view class="iconfont icon-jiahao">
			
			</view>
			<!-- 头像 -->
			<view class="avatar" @tap="openM">
				<image src="/static/1.png" mode="aspectFill"></image>
			</view>
		</view>	
	</view>
  </view>
  
    <!-- 搜索弹出层 -->
	<uni-popup ref="popupRef" type="center">
		 <view class="inpPop">
			 <!-- 搜索框 -->
			 <view class="inp">
			 	<input class="input" 
				type="text"
				focus
			    v-model="searchKey"
				@input="handleSearch"
				placeholder="快速搜索" />
				<view class="oval"></view>
				<view class="shape"></view>
			 </view>
			 <!-- 搜索状态 -->
			 <view class="inp-content" v-if="searchKey">
				 <view class="list-item" v-for="(item,index) in searchResults":key="index">
				 	<!-- 长方形 -->
				 	<view class="rec"></view>
				 	<!-- 标题信息 -->
				 	<view class="list-content">
					
					   <view class="list-title" v-html="highlightKeyword(item.title)">
					    </view> 
					    <view class="list-subtitle" v-if="item.content" v-html="highlightKeyword(item.content)">
					    </view> 
				     </view>
				 	<!-- 图标 -->
				 	<view class="iconfont icon-qingdan"></view>
				 </view>
				 <view v-if="searchResults.length===0" class="searchNull">
				 	适合安静的一天。
				 </view>
			 	 <view class="list-end" v-if="searchResults.length>0">
			 	 	哥，这次真没了~
			 	 </view>
			 </view>
			 <!-- 默认状态 -->
			 <view class="inp-blank" v-else>
			 	任务、标签、内容在此都可搜索。
			 </view>
		 </view>
	</uni-popup>
	
	<!-- 点击查看弹出层 -->
	<uni-popup ref="popupDec" type="bottom">
		<view class="decPop">
		    <view class="line"></view>
			<view class="decPop-content">
				<!-- 左 -->
				<view class="rec"></view>
				<!-- 右 -->
				<view class="dec-content">
					<view class="title">{{title}}</view>
					<mp-html :content="html" container-style="overflow: hidden"></mp-html>
					<view class="setTime">
						<view class="iconfont icon-shijian">
						</view>
						<view class="txt">
	                      设置提醒时间
						</view>
						<view class="delete">
							删除
						</view>
					</view>
				</view>
			</view>
		</view>
	</uni-popup>
	
	<!-- 个人中心弹窗 -->
	<uni-popup ref="popupM" type="bottom">
		<view class="myPop">
		  <view class="line"></view>
		  <view class="avatar">
			   <view class="inner-ring"></view>
			  <image src="/static/1.png" mode="aspectFill"></image>
		  </view>
		  <view class="name">卓君</view>
		  <view class="content">服务与协议</view>
		  <view class="content">用户隐私</view>
		  <view class="content">清理缓存</view>
		  <view class="content">登出账号</view>
		  <view class="service">
			  <view class="txt">
			  	VIP&nbsp;&nbsp;&nbsp;&nbsp;订阅高级版本
			  </view>
			  <view class="iconfont icon-youjiantou">
			  	
			  </view>
		  </view>
		</view>
	</uni-popup>

	<!-- 添加信息弹出层 -->
	<uni-popup ref="popupAdd" type="bottom">
		<view class="addPop">
		    <view class="line"></view>
			<view class="add-item">
			    <input class="item-title"
				 v-model="todoList.title" 
				 type="text" 
				 placeholder="请输入标题"
				  />
				<view class="iconfont icon-shijian" @tap="handleAdd"></view>
			</view>
			<view class="desc">在这里输入详细内容</view>
		</view>
	</uni-popup>
	
	<!-- 登录弹窗 -->
	<uni-popup ref="popupLogin" type="bottom" :style="{paddingBottom:safeAreaInsets.bottom+'px'}">
		<view class="loginPop">
			<!-- 图标 -->
			<view class="icon">
				<view class="point"></view>
				<view class="icon-line"></view>
				<view class="icon-content">
					TODO
				</view>
			</view>
			<!--  登录文字-->
			<view class="icon-title">
				登录之后,<br/>即刻体验TODO
			</view>
			<view class="login-button">
				<view class="button">
					<view class="iconfont icon-weixin"></view>
					<view class="txt"> 使用微信登录</view>
				</view>
				<view class="button">
				  <view class="iconfont icon-zhifubaozhifu"></view>
				  <view class="txt">使用支付宝登录</view>
				</view>
				<view class="button">
				 <view class="iconfont icon-pingguo"></view>
				 <view class="txt"> 使用AppleID登录</view>	
				</view>
			</view>
			<view class="tips">
				用户隐私与服务协议
			</view>
		</view>
	</uni-popup>

    <!-- 菜单弹窗 -->
	<uni-popup ref="popupMenu" type="bottom">
		<view class="menuPopup">
			<view class="line">	</view>
			<view class="list">
				<view class="list-item">
					<view class="iconfont icon-shijian"></view>
					<view class="txt">历史</view>
				</view>
				<view class="list-item">
					<view class="iconfont icon-liebiao"></view>
					<view class="txt">列表</view>
				</view>
				<view class="list-item">
					<view class="iconfont icon-qitabiaoqian"></view>
					<view class="txt">颜色标签</view>
				</view>
				<view class="list-item">
					<view class="iconfont icon-huishouzhan"></view>
					<view class="txt">回收站</view>
				</view>
				<view class="list-item">
					<view class="iconfont icon-chilun"></view>
					<view class="txt">设置</view>
				</view>
			</view>
		</view>
	</uni-popup>
  
	<!-- 日期弹窗 -->
	<uni-popup ref="popupDate" type="top">
		<view class="datePopup">
			<view class="today">今天</view>
			<view class="date">4月18日 周六</view>
			<view class="inp">
				<view class="key">快速搜索</view>
				<view class="oval"></view>
				<view class="shape"></view>
			</view>
			<!-- 日历 -->
			<uni-calendar 
				class="calendar"
				ref="calendar"
				:insert="true"
				@confirm="confirm"
				:lunar="true"
				 />
				<view class="line"></view>
		</view>
		
	</uni-popup>
  </template>

<script setup>
import {ref,nextTick, watch, onMounted, onUnmounted } from 'vue'
import { onLoad  } from '@dcloudio/uni-app'
import { useTodoStore } from '@/store/modules/todo'

// 获取 store
const todoStore = useTodoStore()

// 获取搜索弹出层
const popupRef=ref()
// 获取详情弹出层
const popupDec=ref()
// 获取添加事件弹出层
const popupAdd=ref()
// 获取个人信息弹窗层
const popupM=ref()
// 获取登录弹窗
const popupLogin=ref()
// 获取菜单弹窗
const popupMenu=ref()
// 获取日历弹窗
const popupDate=ref()
 
// 页面加载时打开登录弹窗
onLoad(() => {
  nextTick(() => {
    if (popupLogin.value) {
      popupLogin.value?.open()
    } else {
      console.error("popupLogin 未绑定！")
    }
  })
})

onMounted(() => {
  // 初始化存储监听
  todoStore.initEventListeners()
})

onUnmounted(() => {
  // 清理存储监听
  todoStore.removeEventListeners()
})

// 监听
const {safeAreaInsets}=uni.getSystemInfoSync()

const title=ref('')

const todoList=ref({
	  id: String(Date.now()), // 使用时间戳作为临时ID
	  title: '',
	  isFinish: '1',
	  time: '',
	  isColor: false,
	  show: 'none',
	  isdelete: true
})

// 确认添加（处理回车和按钮点击）
const handleAdd = () => {
  if (!todoList.value.title.trim()) {
    uni.showToast({
      title: '请输入待办事项',
      icon: 'none'
    })
    return
  }
  // 调用store的addTodo方法
  todoStore.addTodo({...todoList.value})
  
  // 重置表单
  resetForm()
  
  uni.showToast({
    title: '添加成功',
    icon: 'success'
  })
  // 关闭弹窗
  popupAdd.value.close()
}

// 重置表单
const resetForm = () => {
  todoList.value.title = ''
}

// const handleChange=(id,e)=>{
// 	todoStore.handleSwipeChange(id,e)
// }

//富文本编辑
const html=ref(`
<div class="desc">
<p>这里是任务详情描述部分，该部分支持富文本编辑，并支持Markdowm功能，
具体的可以自己亲自尝试一下，尝试又不会导致怀孕，是不是。</p>
<p>并且支持丰富的样式。比如:</p></div>
<div class="myTitle">标题1</div>
<div class="myTitle">标题2</div>
<div class="a">点击前往百度</div>
<div class="code"></div>
<div class="sin">
 <div class="sin-Yuan"></div>
 <div class="txt">详情页中还支持单选框</div>
</div>
<div class="fu">
 <div class="fu-Yuan"></div>
 <div class="txt">详情页中还支持单选框</div>
</div>
<div class="fu">
 <div class="fu-Yuan"></div>
 <div class="txt">未来还可能支持@相关人，那样就和钉钉差不多了都</div>
</div>
<div class="tips">字体颜色</div>
`)

// 打开菜单弹出层方法
const openMenu=()=>{
	popupMenu.value.open()
}

// 打开搜索弹出层方法
const openpup=()=>{
	popupRef.value.open()
}
// 打开详情弹出层方法
const openDec=(item)=>{
	nextTick(()=>{
	title.value=item.title
	})
	popupDec.value.open()
}
// 打开添加事件弹出层方法
const openAdd=()=>{
	popupAdd.value.open()
}
// 打开个人信息弹出层
const openM=()=>{
	popupM.value.open()
}
// 打开日期弹窗
const openDate=()=>{
	popupDate.value.open()
}

// 定义搜索关键词
const searchKey=ref('')
// 定义搜索结果
const searchResults=ref([])
// 定义处理方法
const handleSearch=()=>{
	if(!searchKey.value){
		searchResults.value=[]
		return
	}
	const keyword=searchKey.value.toLowerCase()
	searchResults.value=originList.value.filter(item=>{
		return(item.title.toLowerCase().includes(keyword)||
		(item.content && item.content.toLowerCase().includes(keyword)))
	})
}

// 高亮方法
const highlightKeyword = (text) => {
  if (!searchKey.value || !text) return text
  
  // 转义正则特殊字符
  const escapedKeyword = searchKey.value.replace(
    /[.*+?^${}()|[\]\\]/g, 
    '\\$&'
  )
  
  const regex = new RegExp(`(${escapedKeyword})`, 'gi')
  return text.replace(regex, '<span class="highlight">$1</span>')
}

// 定义原始搜索数据
const originList=ref([
	{title:'2020.04.20日报撰写',content:''},
	{title:'2020.04.20会议纪要',content:'这里是会议纪要:日报大家千万别忘记了写哦~'},
])
</script>

<style lang="scss">
.container{
	height: 100dvh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	opacity: 1;
	background: rgba(255, 255, 255, 1);
}

// 左滑插槽
.left{
	width: 180rpx;
	height: 112rpx;
	display: flex;
	align-items: center;
	.left-content{
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		height: 100%;
		.icon-combinedshape{
			font-size: 48rpx;
			color: #5ac8fa;
		}
		.delete-button{
			    position: relative;
			    width: 48rpx;
			    height: 48rpx;
			    background: rgba(255, 49, 48, 1);
			    border-radius: 50%;
			    display: flex;
			    align-items: center;
			    justify-content: center;
				.icon-jianpanshanchu{
					font-size: 30rpx;
					color: white!important;
				}
		}
	}
	.isdelete{
		width: 128rpx;
		height:48rpx;
		opacity: 1;
		border-radius: 24rpx;
		background: rgba(255, 59, 48, 1);
		font-size: 24rpx;
		font-weight: 500;
		letter-spacing: 0;
		text-align: center;
		line-height: 48rpx;
		color: rgba(255, 255, 255, 1);
	}
}

// 右滑插槽
.right{
	width: 862rpx;
	height: 112rpx;
	opacity: 1;
	background: rgba(0, 122, 255, 1);
	display: flex;
	align-items: center;
	position: relative;
	.icon-duihao{
		position: absolute;
		font-size: 35rpx;
		left: 38rpx;
		color: white;
		}
	.big{
		width: 750rpx;
		opacity: 1;
		height: 112rpx;
		margin-left: 112rpx;
		border-radius: 8rpx;
		background: rgba(227, 240, 255, 1);
		display: flex;
		align-items: center;
		.icon-dui{
			font-size: 45rpx;
			color: #88c1ff;
			margin: 0 20rpx;
		}
		.icon-title{
			width: 300rpx;
			height: 42rpx;
			opacity: 1;
			font-size: 30rpx;
			font-weight: 500;
			letter-spacing: 0;
			line-height: 43.44rpx;
			color:rgba(0, 0, 0, 0.85);
			text-align: left;
			vertical-align: top;
		}
	}
}

// 头部
.header{
	width: 100%;
	margin-top: 176rpx;
	height: 322rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	border-radius: 0 0 32rpx 32rpx;
	background: rgba(255, 255, 255, 1);
	box-shadow: 0 8rpx 8rpx -8rpx rgba(0, 0, 0, 0.1);
	opacity: 1;
	.today{
		width:96rpx;
		height:68rpx;
		padding-top: 16rpx;
		opacity: 1;
		font-size: 48rpx;
		font-weight: 500;
		letter-spacing: 0;
		line-height: 69.5rpx;
		color: rgba(0, 0, 0, 1);
		text-align: center;
		vertical-align: top;
	}
	.date{
		padding-top: 6rpx;
		width: 172rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-weight: 500;
		letter-spacing: 0;
		line-height: 40.54rpx;
		color: rgba(0,0,0,1);
		vertical-align: top;
		text-align: center;
	}
	.inp{
		width: 686rpx;
		margin-top: 32rpx;
		height: 80rpx;
		opacity: 1;
		border-radius: 40rpx;
		background:rgba(246,246,246,1);
		position: relative;
		.key{
			padding-top: 20rpx;
			padding-left: 28rpx;
			width: 120rpx;
			height: 40rpx;
			opacity: 1;
			font-size: 30rpx;
			font-weight: 400;
			letter-spacing: 0;
			line-height: 40rpx;
			color: rgba(0,0,0,0.5);
			text-align: left;
			vertical-align: top;
		}
		.oval{
			position: absolute;
			width: 30rpx;
			height: 30rpx;
			opacity: 1;
			border-radius: 50%;
			top: 22rpx;
			right: 30rpx;
			border: 4rpx solid rgba(0, 122, 255, 1);
		}
		.shape {
		  position: absolute;
		  width: 15rpx;
		  height: 4rpx;
		  background: rgba(0, 122, 255, 1); // 实心线条
		  top: 58rpx;
		  right: 25rpx;     // 与圆圈连接
		  transform: rotate(45deg); // 自然斜向
		}
	}
	.line{
		margin-top: 56rpx;
		width: 80rpx;
		height: 8rpx;
		opacity: 1;
		border-radius: 4rpx;
		background: rgba(238, 238, 238, 1);
	}
}

// list区
.content{
	height: 952rpx;
	margin-top: 5rpx;
	display: flex;
	flex-direction: column;
		.list-item{
			width: 750rpx;
			height:112rpx;
			display: flex;
			align-items: center;
			opacity: 1;
			background: rgba(255, 255, 255, 1);
			padding: 0 30rpx;
			position: relative;
			.rec{
				width: 44rpx;
				height: 44rpx;
				opacity: 1;
				border-radius: 22rpx;
				background: rgba(0, 122, 255, 0.08);
				border: 2rpx solid rgba(0, 122, 255, 1);
			}
			.title{
			
				height: 42rpx;
				opacity: 1;
				margin-left: 25rpx;
				font-size: 30rpx;
				font-weight: 500;
				letter-spacing: 0;
				line-height: 43.44rpx;
				color: inherit!important;
				text-align: left;
				vertical-align:top;
			}
			.time{
				margin-left: 25rpx;
				width: 112rpx;
				height:34rpx;
				font-size: 24rpx;
				font-weight: 400;
				letter-spacing: 0;
				line-height: 34.76rpx;
				color: rgba(0, 0, 0, 0.4);;
				text-align: left;
				vertical-align: top;
			}
			.icon-qingdan{
				position: absolute;
				right: 90rpx;
				font-size: 40rpx;
			}
	}
	    .add-list{
		   width: 750rpx;
		   height: 112rpx;
		   opacity: 1;
		   display: flex;
		   align-items: center;
		   padding: 0 27rpx;
		   .icon-jiahao1{
			   font-size: 50rpx;
			   color: #007aff;
		   }
		   .add-title{
			   width: 200rpx;
			   height: 42rpx;
			   opacity: 1;
			   /** 文本1 */
			   font-size: 30rpx;
			   font-weight: 500;
			   letter-spacing: 0rpx;
			   line-height: 42rpx;
			   margin-left: 30rpx;
			   color: rgba(0, 122, 255, 1);
			   vertical-align: top;
			   text-align: left;
		   }
	    }
}

// 底部工具栏
.toolbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 174rpx;
  background: rgba(255, 255, 255, 1);
  border-radius: 32rpx 32rpx 0 0;
  .line{
	  margin: 0 auto;
	  width: 80rpx;
	  height: 8rpx;
	  opacity: 1;
	  border-radius: 4rpx;
	  background: rgba(238, 238, 238, 1);
  }
  .toolbar-content{
	display: flex;
	margin-top: 36rpx;
	align-items: center; 
	justify-content: space-between;
	padding: 0 25rpx;
	.icon-caidan{
		font-size: 36rpx;
	}
	.icon-jiahao{
		margin-left: 10rpx;
		font-size: 64rpx;
		color: #49a0ff;
	}
	 .avatar{
		 width: 48rpx;
		 height: 48rpx;
		 opacity: 1;
		 border-radius: 50%;
		 border:  1rpx solid rgba(97, 97, 97, 1);
		 image{
			 border-radius: 50%;
			 width: 100%;
			 height: 100%;
		 }
	 }
  }
}

// 输入弹窗
.inpPop{
	position: fixed;
	top: 306rpx;
	left: 32rpx;
	width: 686rpx;
	height: 638rpx;
	opacity: 1;
	border-radius: 32rpx;
	background: rgba(255, 255, 255, 1);
	box-shadow:0 0 0 4rpx rgba(0,0,0,0.1) ;
	.inp{
		margin-top: 32rpx;
		position: relative;
		.input{
			margin-left: 24rpx;
			box-sizing: border-box;
			padding: 0 24rpx;
			width: 638rpx;
			height: 80rpx;
			opacity: 1;
			border-radius: 40rpx;
			background: rgba(246, 246, 246, 1);
		     &::placeholder{
			font-size: 30rpx;
			font-weight: 400;
			letter-spacing: 0px;
			line-height: 40rpx;
			color: rgba(0, 0, 0, 0.5);
			text-align: left;
			vertical-align: top;
		    }
		}
		.oval{
			position: absolute;
			width: 30rpx;
			height: 30rpx;
			opacity: 1;
			border-radius: 50%;
			top: 22rpx;
			right: 50rpx;
			border: 4rpx solid rgba(0, 122, 255, 1);
		}
		.shape {
		  position: absolute;
		  width: 15rpx;
		  height: 4rpx;
		  background: rgba(0, 122, 255, 1); // 实心线条
		  top: 56rpx;
		  right: 48rpx;     // 与圆圈连接
		  transform: rotate(45deg); // 自然斜向
		}
	}
	.inp-blank{
		margin-left: 224rpx;
		margin-top: 200rpx;
		width: 240rpx;
		height: 84rpx;
		font-size: 30rpx;
		font-weight: 500;
		letter-spacing: 0;
		line-height: 43.44rpx;
		color: rgba(0, 0, 0, 0.45);
		text-align: center;
		vertical-align: top;
	}
	.inp-content{
		width: 686rpx;
		margin-top: 40rpx;
		display: flex;
		flex-direction: column;
		position: relative;
		.list-end{
			padding-top: 40rpx;
			width: 200rpx;
			height:34rpx;
			opacity: 1;
			font-size: 12px;
			font-weight: 400;
			letter-spacing: 0px;
			line-height: 34.76rpx;
			color: rgba(0, 0, 0, 0.4);
			margin: 0 auto;
			text-align: center;
			vertical-align: top;
		}
		.list-item{
			box-sizing: border-box;
			width:686rpx;
			height:112rpx;
			display: flex;
			align-items: center;
			opacity: 1;
			background: rgba(255, 255, 255, 1);
			padding: 0 30rpx;
			.rec{
				width: 44rpx;
				height: 44rpx;
				opacity: 1;
				border-radius: 22rpx;
				background: rgba(0, 122, 255, 0.08);
				border: 2rpx solid rgba(0, 122, 255, 1);
			}
			.list-content{
				display: flex;
				flex-direction: column;
				height: 112rpx;
				margin-left: 25rpx;
				justify-content: center;
				.list-title{
				width: 400rpx;
				height: 42rpx;
				opacity: 1;
				font-size: 30rpx;
				font-weight: 500;
				letter-spacing: 0;
				line-height: 43.44rpx;
				color: rbga(0,0,0,0.85);
				text-align: left;
				vertical-align:top;
				}
				.list-subtitle{
					height: 34rpx;
					opacity: 1;
					/** 文本1 */
					font-size: 24rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 34.76rpx;
					color: rgba(0, 0, 0, 0.4);
					text-align: left;
					vertical-align: top;
				}
				.highlight{
					color: #007aff!important;
				}
			}
			.icon-qingdan{
				position: absolute;
				right: 30rpx;
				font-size: 40rpx;
			}
		}
	}
    .searchNull{
		margin: 150rpx auto;
		width: 384rpx;
		height: 68rpx;
		opacity: 1;
		/** 文本1 */
		font-size: 48rpx;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 69.5rpx;
		color: rgba(0, 0, 0, 0.2);
		text-align: left;
		vertical-align: top;
	}
}

// 详情弹窗
.decPop{
	width: 750rpx;
	height: 85vh;
	opacity: 1;
	border-radius: 32rpx 32rpx 0rpx 0rpx;
	background: rgba(255, 255, 255, 1);
	display: flex;
	flex-direction: column;
	align-items: center;
	.line{
		margin-top: 15rpx;
		width: 80rpx;
		height: 8rpx;
		opacity: 1;
		border-radius: 4rpx;
		background: rgba(238, 238, 238, 1);
	}
	.decPop-content{
		margin-top: 35rpx;
		display: flex;
		width: 100%;
		.rec{
			margin: 0 30rpx;
			width: 44rpx;
			height: 44rpx;
			opacity: 1;
			border-radius: 22rpx;
			background: rgba(0, 122, 255, 0.08);
			border: 2rpx solid rgba(0, 122, 255, 1);
		}
		.dec-content{
			width: 610rpx;
			height: 1000rpx;
			.title{
				height: 56rpx;
				opacity: 1;
				/** 文本1 */
				font-size: 40rpx;
				font-weight: 500;
				letter-spacing: 0px;
				line-height: 57.92rpx;
				color: rgba(0, 0, 0, 0.85);
				text-align: left;
				vertical-align: top;
			}
			.txtTitle{
				
				opacity: 1;
				/** 文本1 */
				font-size: 36rpx;
				font-weight: 500;
				letter-spacing: 0;
				color: rgba(0, 0, 0, 0.85);
				text-align: left;
				vertical-align: top;
			}
			.txtBaidu{
				width: 180rpx;
				height: 40rpx;
				border-bottom:1rpx solid rgba(0, 122, 255, 1);
				opacity: 1;
				/** 文本1 */
				font-size: 30rpx;
				font-weight: 400;
				letter-spacing: 0px;
				line-height: 40rpx;
				text-decoration-line: underline;
				color: rgba(0, 122, 255, 1);
				text-align: left;
				vertical-align: top;
			}
			.txtCode{
				margin-top: 20rpx;
				height: 356rpx;
				opacity: 1;
				color: white;
				background: rgba(36, 36, 36, 1);
			}
			.textArea{
				margin-top: -20rpx;
				width: 100%;
				// height:1076px;
				height: 250rpx;
				opacity: 1;
				/** 文本1 */
				font-size: 30rpx;
				font-weight: 400;
				letter-spacing: 0;
				line-height: 43.44rpx;
				color: rgba(0, 0, 0, 0.85);
				text-align: left;
				vertical-align: top;
			}
			.setTime{
				 position:absolute;
			     width: 100%;
			     height: 50rpx;
		    	 display: flex;
				 align-items: center;
				 left: 100rpx;
				 bottom: 50rpx;
				.icon-shijian{
					font-size: 40rpx;
					opacity: 1;
					color: #007aff;
				}
				.txt{
					opacity: 1;
					margin-left: 25rpx;
					/** 文本1 */
					font-size: 30rpx;
					font-weight: 500;
					letter-spacing: 0;
					line-height: 43.44rpx;
					color: #262626;
					text-align: left;
					vertical-align: top;
				}
				.delete{
					margin-left: 300rpx;
					opacity: 1;
					/** 文本1 */
					font-size: 30rpx;
					font-weight: 500;
					letter-spacing: 0px;
					line-height: 43.44rpx;
					color: rgba(255, 59, 48, 1);
					text-align: left;
					vertical-align: top;
				}
			}
		}
		
	}
}

// 添加弹出层
.addPop{
	height: 85vh;
	width: 750rpx;
	opacity: 1;
	border-radius: 32rpx 32rpx 0rpx 0rpx;
	background: rgba(255, 255, 255, 1);
	display: flex;
	flex-direction: column;
	align-items: center;
	.line{
		margin-top: 15rpx;
		width: 80rpx;
		height: 8rpx;
		opacity: 1;
		border-radius: 4rpx;
		background: rgba(238, 238, 238, 1);
	}
	.add-item{
		padding:20rpx 0;
		width: 686rpx;
		height:60rpx;;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid rgba(219, 219, 219, 1);
		.item-title{
			width: 686rpx;
			height: 60rpx;
			opacity: 1;
			font-size: 40rpx;
			font-weight: 500;
			text-align: left;
			vertical-align: top;
			letter-spacing: 0;
			&::placeholder{
				color: rgba(0, 0, 0, 0.5);
				}
			}
		.icon-shijian{
			font-size: 40rpx;
			opacity: 1;
			color: #999999;
		}
	}
	.desc{
		width: 686rpx;
		margin-top: 30rpx;
		font-size: 30rpx;
		font-weight: 400;
		letter-spacing: 0px;
		color: rgba(0, 0, 0, 0.4);
		text-align: left;
		vertical-align: top;
	}
}

// 个人信息弹出层
.myPop{
	height: 85vh;
	width: 750rpx;
	opacity: 1;
	border-radius: 32rpx 32rpx 0rpx 0rpx;
	background: rgba(255, 255, 255, 1);
	display: flex;
	flex-direction: column;
	align-items: center;
	.line{
		margin-top: 20rpx;
		width: 80rpx;
		height: 8rpx;
		opacity: 1;
		border-radius: 4rpx;
		background: rgba(238, 238, 238, 1);
	}
	 .avatar {
	    margin: 80rpx 0;
	    width: 148rpx;
	    height: 148rpx;
	    position: relative;
	    display: flex;
	    justify-content: center;
	    align-items: center;
		margin-top: 120rpx;
	    /* 最外层圆环  */
	    &::before {
	      content: '';
	      position: absolute;
	      width: 250rpx;  
	      height: 250rpx;
	      border-radius: 50%;
	      border: 1rpx solid rgba(97, 97, 97, 0.05); 
	      z-index: 0;
	    }
	    
	    /* 中间层圆环  */
	    &::after {
	      content: '';
	      position: absolute;
	      width: 210rpx;  
	      height: 210rpx;
	      border-radius: 50%;
	      border: 1rpx solid rgba(97, 97, 97, 0.1); 
	      z-index: 1;
	    }
	    
	    /* 内层圆环 */
	    .inner-ring {
	      position: absolute;
	      width: 175rpx;
	      height: 175rpx;
	      border-radius: 50%;
	      border: 1rpx solid rgba(97, 97, 97, 0.2);
	      z-index: 2;
	    }
	    
	    image {
	      width: 140rpx;
	      height: 140rpx;
	      border-radius: 50%;
	      border: 1rpx solid rgba(97, 97, 97, 0.8);
	      z-index: 3;
	      position: relative;
	    }
	  }
	.name{
		width: 88rpx;
		height: 62rpx;
		margin-top: 20rpx;
		margin-bottom: 80rpx;
		opacity: 1;
		/** 文本1 */
		font-size: 44rpx;
		font-weight: 500;
		letter-spacing: 0px;
		line-height: 63.72rpx;
		color: rgba(0, 0, 0, 1);
		text-align: left;
		vertical-align: top;
	}
	.content{
		width: 150rpx;
		height: 40rpx;
		margin-bottom: 60rpx;
		opacity: 1;
		/** 文本1 */
		font-size: 30rpx;
		font-weight: 500;
		letter-spacing: 0px;
		line-height: 40rpx;
		color: rgba(0, 0, 0, 1);
		text-align: center;
		vertical-align: top;
	}
	.service{
		width: 686rpx;
		height: 128rpx;
		opacity: 1;
		display: flex;
		align-items: center;
		border-radius: 16rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 4px 12px -4px rgba(0, 0, 0, 0.08);
		position: relative;
		overflow: hidden; 
		 &::before {
		    content: '';
		    position: absolute;
		    width: 310rpx;
		    height: 310rpx;
		    border-radius: 50%;
		    border: 1rpx solid rgba(0, 122, 255, 0.2);
		    z-index: 0;
		    top: -85rpx;
		    left: 35rpx;
		  }
		  &::after {
		    content: '';
		    position: absolute;
		    width: 220rpx;
		    height: 220rpx;
		    border-radius: 50%;
		    border: 1rpx solid rgba(0, 122, 255, 0.4);
		    z-index: 1;
		    top: -40rpx;
		    left: 80rpx;
		  }
		.txt{
			padding: 0 40rpx;
			font-size: 30rpx;
			font-weight: 500;
			letter-spacing: 0px;
			color: rgba(0, 122, 255, 1);
			 z-index: 3;
			text-align: left;
			vertical-align: top;
		}
		.icon-youjiantou{
			font-size: 50rpx;
			 z-index: 3;
			font-weight: 600;
		    margin-left: 250rpx;
			color:rgba(0, 122, 255, 1) ;
		}
	}
}

// 登录弹窗
.loginPop{
	width: 750rpx;
	opacity: 1;
	border-radius: 32rpx 32rpx  0  0 ;
	background: rgba(255, 255, 255, 1);
    height:85vh;
	display: flex;
	flex-direction:column;
	align-items: center;
	.icon{
		width: 164rpx;
		height: 164rpx;
		position: relative;
		opacity: 1;
		margin-top: 206rpx;
		border-radius: 32rpx;
		background: rgba(255, 255, 255, 1);
		border: 1px solid rgba(0, 0, 0, 0.09);
		box-shadow: 0px 8rpx 24rpx -8rpx rgba(0, 0, 0, 0.08);
		.point{
			top: 54rpx;
			left: 80rpx;
			position: absolute;
			width: 8rpx;
			height: 8rpx;
			opacity: 1;
			border-radius: 50%;
			background: rgba(0, 0, 0, 1);
		}
		.icon-line{
			position: absolute;
			top: 54rpx;
			left:96rpx;
			width: 42rpx;
			height: 8rpx;
			opacity: 1;
			border-radius: 4rpx 0 0 4rpx;
			background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
		}
		.icon-content{
			position: absolute;
			top:68rpx;
			left:26rpx;
			width: 112rpx;
			height: 50rpx;
			opacity: 1;
			/** 文本1 */
			font-size: 42rpx;
			font-weight: 400;
			letter-spacing: 0;
			line-height: 49.22rpx;
			color: rgba(0, 0, 0, 1);
			text-align: left;
			vertical-align: top;
		}
	}
	.icon-title{
		margin-top: 100rpx;
		width: 390rpx;
		height: 118rpx;
		opacity: 1;
		/** 文本1 */
		font-size: 42rpx;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 60.81rpx;
		color: rgba(0, 0, 0, 1);
		text-align: center;
		vertical-align: top;
	}
	.login-button{
		margin-top: 300rpx;
	    .button:last-child {
		  margin-bottom: 0 !important;  /* 示例样式 */
		}
		.button{
			width: 700rpx;
			height: 96rpx;
			opacity: 1;
			border-radius: 48px;
			background: rgba(245, 245, 245, 1);
			margin-bottom: 30rpx;
			display: flex;
			align-items: center;
			.iconfont{
				padding-left: 50rpx;
				font-size: 40rpx;
			}
			.icon-weixin{
				color:#52bd33;
			}
			.icon-zhifubaozhifu{
				color:#00aaee;
			}
			.txt{
				margin: 0 auto;
				width: 250rpx;
				height: 42rpx;
				opacity: 1;
				/** 文本1 */
				font-size: 30rpx;
				font-weight: 500;
				letter-spacing: 0px;
				line-height: 43.44rpx;
				color: rgba(0, 0, 0, 1);
				text-align: center;
				vertical-align: top;
			}
		}
	}
	.tips{
		width: 216px;
		height: 34rpx;
		opacity: 1;
		/** 文本1 */
		font-size: 24rpx;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 34.76px;
		text-decoration-line: underline;
		color: rgba(0, 0, 0, 0.24);
		text-align: center;
		margin-top: 20rpx;
	}
}

// 菜单弹窗
.menuPopup{
	width: 750rpx;
	height: 40vh;
	opacity: 1;
	border-radius: 32rpx 32rpx 0 0;
	background: rgba(255, 255, 255, 1);
	display: flex;
	flex-direction: column;
	align-items: center;
	.line{
		margin-top: 20rpx;
		width: 80rpx;
		height: 8rpx;
		opacity: 1;
		border-radius: 4rpx;
		background: rgba(238, 238, 238, 1);
	}
	.list{
		margin:35rpx 0;
	    .list-item:last-child{
			width: 686rpx!important;
			padding-top: 10rpx;
			margin-top: 30rpx;
			border-top: 2rpx solid rgba(245, 245, 245, 1);
		}
		.list-item{
			display: flex;
			align-items: center;
			width: 750rpx;
			height: 100rpx;
			opacity: 1;
			background: rgba(255, 255, 255, 1);
			margin-left: 100rpx;
			.iconfont{
				font-size: 40rpx;
			}
			.icon-shijian{
				color: #007aff;
			}
			.icon-liebiao{
				color:#5ac8fa;
			}
			.icon-qitabiaoqian{
				color:#ff9500;
			}
			.icon-huishouzhan{
				color: #c5d2df;		
			}
			.txt{
				width: 80px;
				height: 40rpx;
				opacity: 1;
				/** 文本1 */
				font-size: 30rpx;
				font-weight: 500;
				letter-spacing: 0;
				line-height: 40rpx;
				color: rgba(0, 0, 0, 1);
				text-align: left;
				vertical-align: top;
				margin-left: 40rpx;
			}
		}
	}
}

// 日期弹窗
.datePopup{
	width: 750rpx;
	height: 860rpx;
	padding-top: 176rpx;
	opacity: 1;
	border-radius: 0  0  32rpx  32rpx;
	background: rgba(255, 255, 255, 1);
	box-shadow: 0 0 8rpx  rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	.today{
		width:96rpx;
		height:68rpx;
		padding-top: 16rpx;
		opacity: 1;
		font-size: 48rpx;
		font-weight: 500;
		letter-spacing: 0;
		line-height: 69.5rpx;
		color: rgba(0, 0, 0, 1);
		text-align: center;
		vertical-align: top;
	}
	.date{
		padding-top: 6rpx;
		width: 172rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-weight: 500;
		letter-spacing: 0;
		line-height: 40.54rpx;
		color: rgba(0,0,0,1);
		vertical-align: top;
		text-align: center;
	}
	.inp{
		width: 686rpx;
		margin-top: 32rpx;
		height: 80rpx;
		opacity: 1;
		border-radius: 40rpx;
		background:rgba(246,246,246,1);
		position: relative;
		.key{
			padding-top: 20rpx;
			padding-left: 28rpx;
			width: 120rpx;
			height: 40rpx;
			opacity: 1;
			font-size: 30rpx;
			font-weight: 400;
			letter-spacing: 0;
			line-height: 40rpx;
			color: rgba(0,0,0,0.5);
			text-align: left;
			vertical-align: top;
		}
		.oval{
			position: absolute;
			width: 30rpx;
			height: 30rpx;
			opacity: 1;
			border-radius: 50%;
			top: 22rpx;
			right: 30rpx;
			border: 4rpx solid rgba(0, 122, 255, 1);
		}
		.shape {
		  position: absolute;
		  width: 15rpx;
		  height: 4rpx;
		  background: rgba(0, 122, 255, 1); // 实心线条
		  top: 58rpx;
		  right: 25rpx;     // 与圆圈连接
		  transform: rotate(45deg); // 自然斜向
		}
	}
	.calendar{
		margin-top: 30rpx;
		width: 90% !important;
	}
	.line{
		position: absolute;		
		bottom: 20rpx;
		width: 80rpx;
		height: 8rpx;
		opacity: 1;
		border-radius: 4rpx;
		background: rgba(238, 238, 238, 1);
	}
	
}

// 未定义
.tips{
	margin-top: 50rpx;
	width: 710rpx;
	height: 84rpx;
	opacity: 1;
	/** 文本1 */
	font-size: 30rpx;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 43.44rpx;
	color: rgba(90, 200, 250, 1);
	text-align: left;
	vertical-align: top;
}
.code{
	margin-top: 40rpx;
	width: 710rpx;
	height:300rpx;
	opacity: 1;
	border-radius: 8rpx;
	background: rgba(36, 36, 36, 1);
}
.sin{
	margin-top: 50rpx;
	display: flex;
	align-items: center;
	.sin-Yuan{
		width: 32rpx;
		height: 32rpx;
		opacity: 1;
		border-radius: 22rpx;
		background: rgba(0, 122, 255, 0.08);
		border: 2rpx solid rgba(0, 122, 255, 1);
	}
	.txt{
		width: 550rpx;
		height: 42rpx;
		opacity: 1;
		/** 文本1 */
		font-size: 30rpx;
		font-weight: 400;
		letter-spacing: 0;
		line-height: 43.44rpx;
		color: rgba(0, 0, 0, 0.85);
		text-align: left;
		vertical-align: top;
		margin-left: 30rpx;
	}
}
.fu{
	margin-top: 30rpx;
	display: flex;
	align-items: center;
	.fu-Yuan{
		width: 32rpx;
		height: 32rpx;
		opacity: 1;
		border-radius: 8rpx;
		background: rgba(0, 122, 255, 0.08);
		border: 2rpx solid rgba(0, 122, 255, 1);	
	}
	.txt{
		width: 550rpx;
		height: 42rpx;
		opacity: 1;
		/** 文本1 */
		font-size: 30rpx;
		font-weight: 400;
		letter-spacing: 0;
		line-height: 43.44rpx;
		color: rgba(0, 0, 0, 0.85);
		text-align: left;
		vertical-align: top;
		margin-left: 30rpx;
	}
}
.myTitle{
	width: 610rpx;
	height: 52rpx;
	opacity: 1;
	margin: 10rpx 0;
	font-size: 36rpx;
	font-weight: 500;
	letter-spacing: 0px;
	line-height: 52.12rpx;
	color: rgba(0, 0, 0, 0.85);
	text-align: left;
	vertical-align: top;
}
.a{
	width: 610px;
	height: 42rpx;
	opacity: 1;
	/** 文本1 */
	font-size: 30rpx;
	font-weight: 400;
	letter-spacing: 0rpx;
	line-height: 43.44px;
	text-decoration-line: underline;
	color: rgba(0, 122, 255, 1);
	text-align: left;
}
</style>